<script lang="ts" setup>
import useLoading from '@/hooks/loading'
import { TitleMap } from '@/config/constants'

interface EditProps {
  modelForm: any
  editVisible: boolean
  createData: any
  updateData: any
  setEditVisible: any
  title?: string
  dialogStatus: string
}

const props = withDefaults(defineProps<EditProps>(), {
  editVisible: false,
  modelForm: {},
  title: '',
  dialogStatus: 'create',
  createData: () => {},
  updateData: () => {},
  setEditVisible: () => {},
})
const { modelForm } = toRefs(props)
const { loading, setLoading } = useLoading()
const formRef = ref<any>(null)
const handleClose = () => {
  props.setEditVisible()
  formRef.value!.resetFields()
}

const handleSubmit = () => {
  formRef.value
    .validate((valid: any) => {
      if (valid) return

      const data = unref(modelForm)
      data.order = parseInt(data.order, 10)

      delete modelForm.value.children
      props.dialogStatus === 'create' ? props.createData(data) : props.updateData(data)
      handleClose()
    })
    .catch((error: any) => {
      console.log('error', error)
    })
    .finally(() => {
      setLoading(false)
    })
}

// 重置
// function reset() {
//   modelForm.value = {
//     menuId: undefined,
//     parentId: 0,
//     title: undefined,
//     icon: undefined,
//     menuType: 'M',
//     order: undefined,
//     blank: 2,
//     visible: 1,
//     status: 1,
//   }
// }

// reset()

const visible = ref(false)
watch(
  () => props.editVisible,
  (show) => {
    visible.value = show
  }
)
</script>
<template>
  <a-modal v-model:visible="visible" @ok="handleSubmit" @cancel="handleClose" :width="680" draggable :loading="loading">
    <template #title>{{ TitleMap[dialogStatus] }}</template>
    <a-form ref="formRef" :model="modelForm" auto-label-width>
      <a-row :gutter="10">
        <a-col :span="24">
          <a-form-item label="上级菜单">
            <a-input v-model="modelForm.parentTitle" placeholder="请输入上级菜单" disabled />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="菜单类型" field="menuType">
            <a-radio-group v-model="modelForm.menuType">
              <a-radio value="M">目录</a-radio>
              <a-radio value="C">菜单</a-radio>
              <a-radio value="F">按钮</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col :span="24" v-if="modelForm.menuType !== 'F'">
          <a-form-item field="iconName" label="菜单图标">
            <a-input v-model="modelForm.iconName" placeholder="请输入菜单图标" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item field="title" label="菜单名称">
            <a-input v-model="modelForm.title" placeholder="请输入菜单名称" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item field="order" label="显示排序">
            <a-input-number v-model="modelForm.order" placeholder="请输入排序" :min="1" />
          </a-form-item>
        </a-col>
        <a-col :span="12" v-if="modelForm.menuType != 'F'">
          <a-form-item label="是否外链" field="blank">
            <a-radio-group v-model="modelForm.blank">
              <a-radio :value="1">是</a-radio>
              <a-radio :value="2">否</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col :span="12" v-if="modelForm.menuType != 'F'">
          <a-form-item field="href" label="路由地址">
            <a-input v-model="modelForm.href" placeholder="请输入路由地址" />
          </a-form-item>
        </a-col>
        <a-col :span="12" v-if="modelForm.menuType == 'C'">
          <a-form-item field="component" label="组件路径">
            <a-input v-model="modelForm.component" placeholder="请输入组件路径" />
          </a-form-item>
        </a-col>
        <a-col :span="12" v-if="modelForm.menuType !== 'F'">
          <a-form-item label="显示状态" field="hidden">
            <a-radio-group v-model="modelForm.hidden">
              <a-radio :value="1">显示</a-radio>
              <a-radio :value="2">隐藏</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col :span="12" v-if="modelForm.menuType !== 'F'">
          <a-form-item label="菜单状态" field="status">
            <a-radio-group v-model="modelForm.status">
              <a-radio :value="1">正常</a-radio>
              <a-radio :value="2">禁用</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>
<style lang="scss"></style>
